﻿@model IEnumerable<SmallJob.Model.Category>
@{
    ViewBag.Title = "ConfigCategory";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@functions{
    public string displayCategory(List<SmallJob.Model.Category> categorys, bool isFirst)
    {
        string output = string.Empty;
        if (isFirst)
        {
            output = "<ol class='sortable'>";
        }
        else
        {
            output = "<ol>";
        }

        foreach (var item in categorys)
        {
            output += "<li id='" + item.ID + "'><div>" + item.Name + "</div>";
            if (item.Childrens.Count > 0)
            {
                output += displayCategory(item.Childrens as List<SmallJob.Model.Category>, false);
            }
            output += "</li>";
        }
        output += "</ol>";
        return output;
    }
    public string hiddenCategory(List<SmallJob.Model.Category> categorys)
    {
        string output = string.Empty;


        foreach (var item in categorys)
        {
            output += "<input type='hidden' class='hidden-inputdisplay-";
            output += (item.ID + "' value='" + item.ParentID + "-" + item.DisplayNumber + "' name='category-" + item.ID + "' />");
            if (item.Childrens.Count > 0)
            {
                output += hiddenCategory(item.Childrens as List<SmallJob.Model.Category>);
            }
        }
        return output;
    }
}
@if (ViewData["result"] != null)
{
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        Config Success
    </div>
}
@MvcHtmlString.Create(displayCategory(Model as List<SmallJob.Model.Category>, true))
@using (Html.BeginForm("SaveConfigCategory", "Category", FormMethod.Post, new { id = "form-configcategory" }))
{
    @MvcHtmlString.Create(hiddenCategory(Model as List<SmallJob.Model.Category>))
    <input type="submit" value="Save Changes" class="btn" style="width: 120px;" />
    <a class="btn" id="btn-reset" href="@Url.Action("ConfigCategory", "Category")">Reset</a>
}
<script src="@Url.Content("~/Content/js/ui/jquery-ui.js")"></script>
<script src="@Url.Content("~/Content/js/jquery.mjs.nestedSortable.js")"></script>
<script>
    function saveState() {
        var list = $('.sortable');
        $.each(list.children('li'), function (index, value) {
            var id = $(this).attr('id');
            $('.hidden-inputdisplay-' + id).val(0 + "-" + (index + 1));
            saveChild(value);
        });
    }
    function saveChild(parent) {
        var parentid = $(parent).attr('id');
        var list = $(parent).children('ol');
        $.each(list.children('li'), function (index, value) {
            console.log($(this));

            var child = $(value);
            console.log($(this).children('li'));
            var id = $(this).attr('id');
            $('.hidden-inputdisplay-' + id).val(parentid + "-" + (index + 1));
            var nextlv = $(value).children('ol');
            if (nextlv.children('li').length > 0) {
                saveChild(child);
            }
        });
    }
    function reset() {


    }
    $(document).ready(function () {

        $('.sortable').nestedSortable({
            handle: 'div',
            items: 'li',
            toleranceElement: '> div'
        });
        saveState();
        $('#form-configcategory').submit(function () {
            saveState();
        });
        $('#btn-reset').click(function () {
            reset();
        });
    });


</script>

